<template>
    <el-container>
        <el-header style="height: 50px;border-bottom: none">
            <div class="left-panel">
                <div class="finish">
                    <div class="finishNum">总匹数:<div class="text">{{ total_stock.total_number }}</div></div>
                    <div class="finishNum">总销售额:<div class="text">{{ total_stock.total_price }}</div></div>
                </div>
            </div>
        </el-header>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'saleorder.add'" ></el-button>
                <el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del" v-auth="'saleorder.delete'" ></el-button>
                <sc-import-button :auth="'saleorder.import'" :apiObj="importObj" :base="base + '/file_templets/temples_sale.xlsx'" @importSuccess="importSuccess" ></sc-import-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-button type="primary" @click="print_day_summary" v-auth="'saleorder.summary'" >每日小结</el-button>
                    <el-input v-model="search.search_keyword"  class="input-with-search" style="width: 300px" @keyup.enter="upsearch">
                        <template #prepend>
                            <el-select v-model="search.search_field" filterable clearable placeholder="请选择" style="width: 110px">
                                <el-option label="单号" value="contract_code"/>
                                <el-option label="客户" value="customer_name"/>
                                <el-option label="条码" value="roll_code"/>
                            </el-select>
                        </template>
                    </el-input>
                    <!-- <el-select v-model="search.area_id" placeholder="地区" filterable clearable>
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select> -->
                    <el-select v-model="search.status" placeholder="状态" clearable>
                        <el-option label="挂单" :value="0"></el-option>
                        <el-option label="过账" :value="1"></el-option>
                        <el-option label="全部" :value="-1"></el-option>
                    </el-select>
                    <el-date-picker v-model="search.contract_date" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" border :params="search" @setExtend="setExtend" tableName="saleTable" :column="saleColumn">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <template #contract_code="{row}">
                    <div class="flex">
                        <el-link :underline="false" type="primary" @click="table_show(row)">{{ row.contract_code }}</el-link>
                        <el-icon class="icon" :size="20" @click="common.copy(row.contract_code)"><el-icon-Edit /></el-icon>
                        <el-icon class="icon" :size="20" color="#29f" @click="sale_bell(row)" v-auth="'saleorder.message'"><el-icon-BellFilled /></el-icon>
                    </div>
                </template>
                <template #status="{row}">
                    <el-button :type="row.status == 0 ? 'warning' : 'primary'" size="small" @click="sale_check(row,$event)" v-auth="'saleorder.check'">{{row.status == 0 ? '挂单' : '过账'}}</el-button>
                </template>
                <template #remark="{row}">
                    <div class="flex start">
                        <el-icon v-auth="'saleorder.remark'" class="icon" color="#1e9fff" :size="18" @click="table_remark(row)"><el-icon-EditPen /></el-icon> <span>{{row.remark}}</span>
                    </div>
                </template>
                <template #operation="scope">
                    <div class="buttonFlex start">
                        <el-button type="default" size="small" @click="table_export(scope.row, $event)" v-auth="'saleorder.export'">导出</el-button>
                        <el-button type="default" size="small" @click="table_print(scope.row, $event)" v-auth="'saleorder.print'">打印</el-button>
                        <el-button type="primary" size="small" @click="table_edit(scope.row, $event)" v-auth="'saleorder.edit'" v-if="scope.row.status != 1">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, $event)">
                            <template #reference>
                                <el-button type="danger" size="small" v-auth="'saleorder.delete'" v-if="scope.row.status != 1">删除</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="default" size="small" @click="table_print_detail(scope.row, $event)" v-auth="'saleorder.print'">打印明细</el-button>
                        <el-button type="primary" size="small" @click="table_return(scope.row, $event)" v-auth="'saleorder.return'" v-if="scope.row.status == 1">退货</el-button>
                        <el-button type="default" size="small" @click="table_returnrecord(scope.row, $event)" v-auth="'saleorder.returnrecord'" v-if="scope.row.status == 1">退货记录</el-button>
                        <el-button type="default" size="small" @click="table_pickup(scope.row, $event)" v-auth="'saleorder.pickup'">提货</el-button>
                    </div>
                </template>


                <!-- <el-table-column label="销售单号" prop="contract_code" align="center" width="220">
                    <template #default="{row}">
                        <div class="flex">
                            <el-link type="primary" @click="table_show(row)">{{ row.contract_code }}</el-link>
                            <el-icon class="icon" :size="20" @click="common.copy(row.contract_code)"><el-icon-Edit /></el-icon>
                            <el-icon class="icon" :size="20" color="#29f" @click="sale_bell(row)" v-auth="'saleorder.message'"><el-icon-BellFilled /></el-icon>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="客户" prop="customer.customer_name" align="center" width="120"></el-table-column>
                <el-table-column label="状态" align="center" width="100">
                    <template #default="{row}">
                        <el-button :type="row.status == 0 ? 'warning' : 'primary'" size="small" @click="sale_check(row)" v-auth="'saleorder.check'">{{row.status == 0 ? '挂单' : '过账'}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="数量" prop="total_count" align="center" width="120"></el-table-column>
                <el-table-column label="金额" prop="contract_price" align="center" width="120"></el-table-column>
                <el-table-column label="备注" prop="remark" show-overflow-tooltip>
                    <template #default="{row}">
                        <div class="flex start">
                            <el-icon v-auth="'saleorder.remark'" class="icon" color="#1e9fff" :size="18" @click="table_remark(row)"><el-icon-EditPen /></el-icon> <span>{{row.remark}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="业务员" prop="create_staff_name" align="center" width="120"></el-table-column>
                <el-table-column label="日期" prop="contract_date" align="center" width="120"></el-table-column>
                <el-table-column label="操作" align="left" width="320">
                    <template #default="scope">
                        <div class="buttonFlex start">
                            <el-button type="default" size="small" @click="table_export(scope.row)" v-auth="'saleorder.export'">导出</el-button>
                            <el-button type="default" size="small" @click="table_print(scope.row)" v-auth="'saleorder.print'">打印</el-button>
                            <el-button type="primary" size="small" @click="table_edit(scope.row)" v-auth="'saleorder.edit'" v-if="scope.row.status != 1">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button type="danger" size="small" v-auth="'saleorder.delete'" v-if="scope.row.status != 1">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button type="primary" size="small" @click="table_return(scope.row)" v-auth="'saleorder.return'" v-if="scope.row.status == 1">退货</el-button>
                            <el-button type="default" size="small" @click="table_returnrecord(scope.row)" v-auth="'saleorder.returnrecord'" v-if="scope.row.status == 1">退货记录</el-button>
                        </div>
                    </template>
                </el-table-column> -->
            </scTable>
        </el-main>
    </el-container>
    <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false"></save-dialog>
    <check-status v-if="dialog.check" ref="checkDialog" @success="handleSuccess" @closed="dialog.check = false"></check-status>
    <sale-print v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false"></sale-print>
    <notice-save v-if="dialog.notice" ref="noticeDialog" @success="handleSuccess" @closed="dialog.notice = false"></notice-save>
    <remark-save v-if="dialog.remark" ref="remarkDialog" @success="handleSuccess" @closed="dialog.remark = false"></remark-save>

    <el-dialog title="每日小结打印" width="500" v-model="dialog.print_summary" align-center draggable overflow>
        <el-form label-position="top">
            <el-form-item label="日期">
                <el-date-picker v-model="summary_time" type="date" placeholder="请选择日期" :value-format="'YYYY-MM-DD'" style="width:100%" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="open_print">打 印</el-button>
        </template>
    </el-dialog>
    <summary-print v-if="dialog.summary" ref="summaryDialog" @success="handleSuccess" @closed="dialog.summary = false"></summary-print>

    <detail-print v-if="dialog.detail" ref="detailDialog" @success="handleSuccess" @closed="dialog.detail = false"></detail-print>
    <pick-list v-if="dialog.pick" ref="pickDialog" @success="handleSuccess" @closed="dialog.pick = false" :query="{contract_id: contract_id}"></pick-list>
</template>

<script>
import CheckStatus from './checkStatus.vue'
import saveDialog from './save'
import SalePrint from './salePrint.vue'
import NoticeSave from '../../noticeSave.vue'
import config from '@/config'
import RemarkSave from '../../remarkSave.vue'
import detailPrint from './detailPrint.vue'
import PickList from './pickList.vue'
import SummaryPrint from './summaryPrint.vue'

export default {
    name: '采购计划管理',
    components: {
        saveDialog,
        CheckStatus,
        SalePrint,
        NoticeSave,
        RemarkSave,
        detailPrint,
        PickList,
        SummaryPrint
    },
    data() {
        return {
            dialog: {
                save: false,
                check: false,
                print: false,
                notice: false,
                detail: false,
                summary: false,
                print_summary: false,
            },
            apiObj: this.$API.business.sale.list,
            base: config.API_URL,
			importObj: this.$API.business.sale.import,
            selection: [],
            search: {
                search_keyword: null,
                search_field: null,
                ware_id: null,
                status: 0,
                contract_date: [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')],
            },
            areaList: [],
            total_stock: {
                total_number: 0,
                total_price: 0
            },
            saleColumn: [
                {label: "销售单号", prop: "contract_code", width: "220"},
                {label: "客户", prop: "customer.customer_name", width: "120"},
                {label: "状态", prop: "status", width: "100"},
                {label: "数量", prop: "total_count", width: "120"},
                {label: "金额", prop: "contract_price", width: "120"},
                {label: "备注", prop: "remark", showOverflowTooltip: true, align: "left"},
                {label: "业务员", prop: "create_staff_name", width: "120"},
                {label: "日期", prop: "contract_date", width: "120"},
                {label: "操作", prop: "operation", width: "400", align: "left"},
            ],
            contract_id:"",
            summary_time: this.moment().format('YYYY-MM-DD'),
        }
    },
    mounted() {
		// this.getArea();
    },
    methods: {
        setExtend(data){
            this.total_stock = data
        },
        //添加
        add(e) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open()
            })
            this.common.buttonBlur(e)
        },
        //编辑
        table_edit(row,e) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },
        //查看
        table_show(row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDialog.open('show').setData(row)
            })
        },
        //删除
        async table_del(row,e) {
            var reqData = { id: row.id }
            var res = await this.$API.business.sale.delete.post(reqData);
            if (res.code == 1) {
                this.$refs.table.refresh()
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
            this.common.buttonBlur(e)
        },
        async table_del_all(delete_ids) {
            var reqData = { id: delete_ids }
            var res = await this.$API.business.sale.delete.post(reqData);
            if (res.code == 1) {
                this.$refs.table.refresh()
                this.$message.success("删除成功")
            } else {
                this.$alert(res.message, "提示", { type: 'error' })
            }
        },
        //批量删除
        async batch_del(e) {
            var delete_ids = [];
            this.selection.forEach((item) => {
                delete_ids.push(item.id)
            })

            this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
                type: 'warning'
            }).then(() => {
                this.table_del_all(delete_ids)
            }).catch(() => {

            })
            this.common.buttonBlur(e)
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //搜索
        upsearch(e) {
            this.$refs.table.upData(this.search)
            this.common.buttonBlur(e)
        },
        //本地更新数据
        handleSuccess(data, mode) {
            if (mode == 'add') {
                this.$refs.table.refresh()
            } else if (mode == 'edit') {
                this.$refs.table.refresh()
            } else if (mode == 'sale') {
                this.$refs.table.refresh()
            }
        },
        refresh(e) {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.search.contract_date = [this.moment().subtract(1, 'days').format('YYYY-MM-DD'), this.moment().format('YYYY-MM-DD')],
            this.$refs.table.upData(this.search)
            this.common.buttonBlur(e)
        },
		// 地区列表
		async getArea() {
			var res = await this.$API.basic.area.all.get();
			this.areaList = res.data
		},
        sale_bell(row){
            let data = {
                id: row.id,
                code: row.contract_code,
                apply_id: row.apply_id
            }
            this.dialog.notice = true
            this.$nextTick(() => {
                this.$refs.noticeDialog.open('edit').setData(data,'销售单',8)
            })
        },

        table_print(row,e){
            this.dialog.print = true
            this.$nextTick(() => {
                this.$refs.printDialog.open('edit').setData(row)
            })
            this.common.buttonBlur(e)
        },

        // 状态审核
        sale_check(row,e){
            this.dialog.check = true
            this.$nextTick(() => {
                this.$refs.checkDialog.open('add').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 备注
        table_remark(row){
            this.dialog.remark = true
            this.$nextTick(() => {
                this.$refs.remarkDialog.open('sale').setData(row)
            })
        },
        // 打印
        table_print_detail(row,e){
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open('print').setData(row)
            })
            this.common.buttonBlur(e)
        },
        // 提货
        table_pickup(row,e){
            this.contract_id = row.id
            this.dialog.pick = true
            this.$nextTick(() => {
                this.$refs.pickDialog.open('add')
            })
            this.common.buttonBlur(e)
        },
        print_day_summary(e){
            this.dialog.print_summary = true
            this.common.buttonBlur(e)
        },
        // 小结打印
        open_print(){
            this.dialog.summary = true
            this.$nextTick(() => {
                this.$refs.summaryDialog.open('edit').setData(this.summary_time)
            })
        },
    },
}
</script>

<style></style>
